const { merge } = require('webpack-merge');
const config = require('./webpack.config.js');
const path = require('path');

const devConfig = merge(config, {
  mode: 'development',
  output: {
    pathinfo: true,
    publicPath: '/',
  },
  devtool: 'inline-source-map',
  devServer: {
    historyApiFallback: true,
    static: {
      directory: path.join(__dirname, 'public'),
    },
    compress: true,
    port: 9000,
    host: '0.0.0.0',
    hot: true,
    open: false,
    proxy: [],
    client: {
      overlay: {
        errors: true,
        warnings: false,
      },
      progress: false, //进度打印
      reconnect: 10,
    },
  },
  module: {
    rules: [
      {
        test: /\.(css)$/i,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.less$/i,
        use: [
          'style-loader',
          {
            loader: 'css-loader', //注意css-loader版本，否则会导致cssModule报错，例如找不到类名之类的
            options: {
              modules: {
                localIdentName: '[name]__[local]__[hash:base64:5]', // 自定义类名格式
                auto: true,
              },
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                // plugins: [require('autoprefixer'), require('tailwindcss')],
                plugins: [require('autoprefixer')()],
              },
            },
          },
          {
            loader: 'less-loader', // 编译Less到CSS
            options: {
              lessOptions: {
                javascriptEnabled: true, // 启用内联JavaScript
              },
            },
          },
        ],
      },
    ],
  },
  cache: true,
});

module.exports = devConfig;
